<template>
  <div>
    <h1>状态管理</h1>
    <!-- 通过状态对象获取共享数据 -->
    <div>
      <p>变量获取：{{ name1 }}</p>
      <p>展开属性：{{ name2 }}</p>
      <p>展开属性：{{ name }}</p>
    </div>
    <!--状态信息-->
    <div>
      <p>当前数量: {{ count }}</p>
      <button @click="add(1)">加1</button>
      <button @click="sub(1)">减1</button>
      <button @click="add2(2)">加2</button>
      <button @click="sub2(2)">减2</button>
      <button @click="increment(3)">加3</button>
      <button @click="decrement(3)">减3</button>
    </div>
    <!--状态过滤-->
    <div>
      <ul>
        <li style="text-align:left;" v-for="item in filterList2" :key="item.id">
          {{ item.name }} - {{ item.sexName }}
        </li>
      </ul>
      <hr />
      <ul>
        <li style="text-align:left;" v-for="item in filterList1" :key="item.id">
          {{ item.name }} - {{ item.sexName }}
        </li>
      </ul>
      <hr />
      <ul>
        <li style="text-align:left;" v-for="item in filterList" :key="item.id">
          {{ item.name }} - {{ item.sexName }}
        </li>
      </ul>
    </div>
    <div>
      <button @click="getList11(3)">获取3条数据</button>
      <button @click="getList2(3)">获取3条数据2</button>
      <button @click="getListData(3)">获取3条数据3</button>
      <button @click="getListPromise(5)">获取5条数据返回Promise</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";

export default {
  computed: {
    // 读取属性方式如下3种
    // 方式一：通过store对象获取状态
    name1() {
      return this.$store.state.name;
    },
    // 通过vuex提供对象获取(es6展开属性)并添加属性
    // ...mapState("名字空间", {
    //   name2: (state) => state.name,
    // }),
    ...mapState({
      name2: (state) => state.name,
    }),
    // 简写方式：展开属性并简写方式-引入name后并添加name变量--最后速写为name
    // ...mapState("名字空间", ["name", "count"]),
    ...mapState(["name", "count"]),
    // 过滤属性，方式一：通过store属性获取
    // 调用store的属性过滤方法
    filterList2() {
      // 名字空间用法
      //return this.$store.getters[moduleA/filterList]
      return this.$store.getters.filterList;
    },
    // 过滤属性，方式二：通过工具类
    ...mapGetters({
      filterList1: "filterList",
    }),
    // 过滤属性，方式三：简写方式
    ...mapGetters(["filterList"]),
  },
  methods: {
    // 方法一：通过$store的commit调用action修改
    add(step) {
      // 名字空间
      //this.$store.commit("moduleA/increment", step);
      this.$store.commit("increment", step);
    },
    sub(step) {
      this.$store.commit("decrement", step);
    },
    // 方法二：通过vuex提供的工具类mapMutations修改
    ...mapMutations({
      add2: "increment",
      sub2: "decrement",
    }),
    // 简写方式:数组
    ...mapMutations(["increment", "decrement"]),
    getList11(val) {
      // 包含名字空间的用法：名字空间/action名
      //this.$store.dispatch("moduleA/getList2", val);
      this.$store.dispatch("getList2", val);
    },
    // 使用工具类实现
    ...mapActions({
      getListData: "getList2",
    }),
    ...mapActions(["getList2"]),
    // 使用Promise对象
    getListPromise(val) {
      this.$store.dispatch("getList3", val).then(() => {
        this.add2(10);
      });
    },
  },
  created() {
    this.$store.dispatch("getList");
  },
};
</script>
<style lang="stylus" scoped></style>
